<%@ page import="java.time.LocalDateTime" %>
<%@ page import="javax.xml.crypto.Data" %>
<%@ page import="java.time.format.DateTimeFormatter" %><%--
  Created by IntelliJ IDEA.
  User: 123
  Date: 2024/11/19
  Time: 下午8:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品列表</title>
    <link rel="stylesheet" href="static/css/product.css">
<script src="static/js/vue-2.6.10.js"></script>
<script src="static/js/axios.min.js"></script>
    <style>
        .lll {
            background-color: palevioletred;
            width: 1450px;
            height: 100px;
            font-size: 80px;
            color: lightblue;
        }
        .www {
            width:800px;
            height: 40px;
            background-color: pink;
            font-size: 25px;
            border-radius: 20px 20px 0px 0px;
        }
        .cad {
            list-style: none;
        }
        .wfd {
            color: white;
            margin-left: 30px;
        }
        .product-tiem{
            display:flex;
        }
        .product-img{
            width: 300px;
            height: 200px;
            border: 1px solid #ccc;
            text-align: center;
        }
        .product-img>img{
            width: 125px;
            height: 125px;
            display:inline-block;
            margin-top: 37px;
        }
        .xhx{
            text-decoration: none;
            color:#4e555b;
        }
        .product-list{
            border: 1px solid gray;
            width: 800px;
            border-radius: 20px 20px 0px 0px;
            margin-top: -560px;
            margin-left: 650px;
        }
        .product-info{
            border-bottom: 1px solid gray;
            width: 800px;
            margin-top: 30px;
        }
        .product{
            margin-left: 25px;
        }
        .abc {
            width: 1450px;
            height: 40px;
            line-height: 40px;
            background-color: pink;
        }
        .ab {
            margin-top: 50px;
            width: 450px;
            height: 40px;
            line-height: 40px;
            background-color: pink;
            border-radius: 20px 20px 0px 0px;
        }
        .ca {
            width: 409px;
            height: 200px;
            border: 1px solid #ccc;
            text-align: center;
            border-radius: 20px 20px 0px 0px;
            /*position: absolute;*/
            /*top: 30px;*/
            /*left: 10px;*/
        }
        li{
            display: inline-block;
            margin-right: 118px;
            text-decoration: none;
        }
        .rrr {
            width: 450px;
            height: 40px;
            line-height: 40px;
            /*margin-left: 500px;*/
            margin-block: 190px;
            margin-top: -55px;
            background-color: pink;
            border-radius: 20px 20px 0px 0px;
        }
        .rrr {
            margin-top: 245px;
            margin-right: 500px;
        }
        .cac{
            width: 409px;
            height: 200px;
            border: 1px solid #ccc;
            border-radius: 20px 20px 0px 0px;
            /*position: absolute;*/
        }
        .euyq {
            width: 200px;
            height: 36px;
            margin-right: 290px;
            margin-top: 51px;
        }
        .qqq {
            width: 40px;
            height: 42px;
            margin-left:200px;
            margin-top: -42px;
            font-size: 15px;
            border-radius: 0px 20px 0px 0px;
        }
        .ttt {
            width: 60px;
            height: 35px;
            margin-right: 150px;
            margin-top: -52px;
        }

        .gg {
            margin-top: -180px;
            margin-left: 140px;
        }
        .ggg {
            width: 70px;
            height: 30px;
            margin-left: 152px;
            margin-top: -10px;
            text-align: center;
        }

    </style>
</head>
<body action="product_list.do" method="post">
<%
    LocalDateTime now = LocalDateTime.now();
//    定义日期时间的格式
//    DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd:mm:ss");
    DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
//    格式化当前日期时间为指定日期
    String formattedDateTime = now.format(formatter);
%>
<div class="lll">
    <li><a>E-STORE ----计算机电商团队</a></li>
</div>
<div class="abc" style="margin-top:0">
    <ul class="cad">
        <li><a class="xhx" href="#">首页</a></li>
        <li><a class="xhx" href="#">商城商品</a></li>
        <li><a class="xhx" href="#">特价商品</a></li>
        <li><a class="xhx" href="shoppingcart.jsp">购物车</a></li>
        <li><a class="xhx" href="#">订单查看</a></li>
        <li><a class="xhx" href="#">用户修改</a></li>
        <li><a>在线人数:1w</a></li>
            <%
        if(session.getAttribute("customerId")==null){
    %>
<%--        <p>请登录</p>--%>
        <li><a href="Login.jsp"></a></li>
        <div class="flag">
            <li><a class="xhx" href="#"><button><a href="Login.jsp">登录</a></button></a></li>
            <li><a class="xhx" href="#"><button><a href="register.jsp">注册</a></button></a></li>
        </div>
        <%
            }else {
        %>
            <%
        }
        %>
</ul>
</div>
    <div class="ab" >
        <ul class="ca">
            <li>商城搜索</li>
            <ul class="euy"><form autocomplete="off" target="_blank"><input class="euyq" type="text" value=""name=""id="euy"></form></ul>
            <span class="qqq"><a class="xhx" href="#"><button class="ttt">搜索</button></a></span>
        </ul>
    </div>
<div class="rrr">
<%--        <div class="abl">--%>
            <ul class="cac">
                <li>用户信息</li>
            </ul>
            <ul class="gg">
<%--                <p>登录成功</p>--%>
                <p><%=formattedDateTime%></p>
                <p>用户姓名：<%=session.getAttribute("username")%><p>
<%--                <button>安全退出</button>--%>
            </ul>
            <ul class="ggg" >
                <span><a class="xhx" href="#"><button><a href="Login.jsp">安全退出</a></button></a></span>
            </ul>
</div>

<div class="product-list" id="app">
    <div class="www">
        <span class="wfd">商品展示</span>
    </div>

    <div class="product-tiem" v-for="product in product_list">
        <div class="product-img">
            <img :src= "imagesUrl(product.picture)">
        </div>
        <div class="product-info">
            <div class="product">
            <div>品名：<span>{{product.name}}</span></div>
                            <div>原价：<del>{{product.market_price}}</del>元</div>
                            <div>现价：<span>{{product.sell_price}}</span>元</div>
                            <div>简介：<span>{{product.description}}</span></div>
                            <p><a :href="product_info(product.id)"  class="xhx" > 查看详细内容</a > </p>
            </div>
        </div>
    </div>
    <dt>！！！！本月畅销商品！！！！</dt>
 </div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            product_list: [{"name": "商品1"}, {"name": "商品2"}, {"name": "商品3"}, {"name": "商品4"}],
        },
        created() {
            // 异步请求
            axios({
                url:'product_list.do',
            }).then(re=>{
                console.log(re)
                this.product_list=re.data
            })
        },
        methods: {
            imagesUrl: function (img_name) {
                return "static/img/productImages/" + img_name
            },
            product_info:function (id){
                return 'product_info.do?id=' +id;
            }
        }
    })
</script>
</body>
</html>
